<template>
  <div class="map-container">
    <el-amap
      :show-label="false"
      :center="center"
      :zoom="zoom"
      @click="clickMap"
      @init="initMap"
    >
      <el-amap-geojson
        :geo="geoJSON"
        :polygon-options="polygonOptions"
        :visible="visible"
        :draggable="draggable"
        @click="click"
      />
    </el-amap>
    <div class="control-container">
      <el-button @click="toggleVisible">
        {{ visible ? '隐藏标记' : '显示标记' }}
      </el-button>
      <el-button @click="changeData">
        更新数据
      </el-button>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import ElAmap from '@vuemap/vue-amap/packages/amap/amap.vue'
import ElAmapGeojson from "@vuemap/vue-amap/packages/vector/GeoJSON/GeoJSON.vue";
import geo from '../../assets/chongqing.json'

export default defineComponent({
  name: "Map",
  components: {
    ElAmapGeojson,
    ElAmap},
  data(){
    return {
      zoom: 7,
      center: [107.943579, 30.131735],
      draggable: false,
      visible: true,
      geoJSON: geo,
      polygonOptions: {
        strokeColor: 'red',
        fillColor: 'blue'
      }
    }
  },
  methods: {
    clickMap(e){
      console.log('click map: ', e);
    },
    initMap(map){
      console.log('init map: ', map);
    },
    toggleVisible(){
      this.visible = !this.visible;
    },
    click(e) {
      alert('click GeoJSON');
    },
    changeData(){
      this.geoJSON = {"type": "FeatureCollection",
        "features":
            [
              {"type": "Feature","properties":{"id":"500242","name":"酉阳土家族苗族自治县","cp":[108.8196,28.8666],"childNum":1},"geometry":{"type":"Polygon","coordinates":[[[108.3142,28.9984],[108.3252,29.0039],[108.3801,29.0479],[108.4021,29.0533],[108.4131,29.0533],[108.4351,29.0698],[108.457,29.0698],[108.468,29.0863],[108.479,29.0863],[108.49,29.0918],[108.512,29.0973],[108.5339,29.1248],[108.5559,29.1412],[108.5999,29.1083],[108.5889,29.0973],[108.5889,29.0918],[108.5999,29.0863],[108.5999,29.1083],[108.6108,29.1028],[108.6218,29.0753],[108.6438,29.0808],[108.6658,29.0698],[108.6658,29.0918],[108.6658,29.0973],[108.6658,29.1028],[108.6658,29.1083],[108.6877,29.1083],[108.7097,29.0918],[108.7317,29.0808],[108.7427,29.0863],[108.7537,29.1083],[108.7756,29.1083],[108.7756,29.1248],[108.7976,29.1302],[108.8416,29.1083],[108.8525,29.1083],[108.8525,29.1357],[108.8965,29.2072],[108.9294,29.2236],[108.9514,29.2676],[108.9075,29.295],[108.9185,29.328],[108.9844,29.3335],[109.0063,29.361],[109.0393,29.3665],[109.0503,29.3939],[109.0613,29.4049],[109.1052,29.3719],[109.1162,29.3555],[109.1052,29.295],[109.1162,29.2841],[109.1382,29.2676],[109.1162,29.2181],[109.1272,29.1907],[109.1382,29.1687],[109.1602,29.1797],[109.2151,29.1467],[109.2371,29.1248],[109.2261,29.1138],[109.2371,29.0863],[109.314,29.0698],[109.325,29.0369],[109.292,29.0149],[109.292,28.9984],[109.292,28.9764],[109.27,28.9709],[109.259,28.9545],[109.259,28.9105],[109.2371,28.8831],[109.2151,28.8831],[109.1711,28.8501],[109.1492,28.8501],[109.1492,28.8391],[109.0942,28.8226],[109.0942,28.8116],[109.1052,28.8116],[109.1052,28.8062],[109.0613,28.7677],[109.0613,28.7402],[109.0393,28.7183],[109.0173,28.6908],[108.9954,28.7018],[108.9954,28.6798],[108.9844,28.6798],[108.9514,28.6084],[108.9185,28.6194],[108.8965,28.6139],[108.8855,28.6194],[108.8196,28.6029],[108.7976,28.5864],[108.7866,28.548],[108.7646,28.548],[108.7427,28.5205],[108.7317,28.5205],[108.7207,28.4985],[108.7097,28.4985],[108.6987,28.4821],[108.6548,28.4766],[108.6438,28.4601],[108.6877,28.4216],[108.6987,28.4052],[108.6877,28.3942],[108.6658,28.3832],[108.6548,28.3667],[108.6548,28.3502],[108.6658,28.3557],[108.6768,28.3502],[108.6658,28.3337],[108.6108,28.3228],[108.5999,28.3392],[108.5779,28.3447],[108.5889,28.3667],[108.5779,28.3887],[108.5889,28.4052],[108.6108,28.4052],[108.6108,28.4326],[108.5889,28.4601],[108.5779,28.526],[108.5779,28.537],[108.6108,28.5425],[108.5999,28.5919],[108.6328,28.6194],[108.6328,28.6359],[108.6328,28.6414],[108.6108,28.6359],[108.5889,28.6414],[108.5889,28.6469],[108.5669,28.6633],[108.5559,28.6469],[108.5339,28.6523],[108.501,28.6249],[108.479,28.6249],[108.3911,28.6523],[108.3582,28.6743],[108.3362,28.6743],[108.3472,28.7073],[108.3472,28.7347],[108.3801,28.7732],[108.3911,28.7952],[108.3801,28.8062],[108.3582,28.8171],[108.3472,28.8556],[108.3582,28.894],[108.3472,28.9105],[108.3582,28.9325],[108.3472,28.949],[108.3252,28.96],[108.3142,28.9984]]]}},
            ]
      }

    }
  }
})
</script>

<style scoped>
.map-container{
  width: 100%;
  height: 100%;
  position: relative;
}
.control-container{
  position: absolute;
  padding: 24px;
  background: #ffffff;
  z-index: 2;
  bottom: 40px;
  left: 150px;
  right: 150px;
}
</style>
